<template>
	<view class="container">
		<view class="status-bar">

		</view>
		<uni-nav-bar left-icon="left" @clickLeft="leftback" :title="title" :border="false" :height="barhig"
			class="header-title" />
		<view class="content" :style="`padding-top:${systemBarHeight+64}px`">
			<makeselectRiqi @hqriqi="hqriqi"></makeselectRiqi>
			<view class="doctor-list">
				<view class="title">
					<text>坐诊医生</text>
				</view>
				<doctorLi v-for="item in doctorList" :key="item.dt_id" :doctorList="item" @boctoref="boctoref">
				</doctorLi>
			</view>
		</view>
		<view class="openpop">
			<uni-popup ref="popup" type="bottom" background-color="#fff" class="popup">
				<view class="popup-content">
					<view class="uptitle">
						<text>选择预约时间段</text>
						<uni-icons @click="close" type="closeempty" size="24" class="chacc" color="#ccc"></uni-icons>
					</view>
					<view class="morning">
						<text class="label">上午号源: </text><text>剩余{{swnum}}</text>
						<view class="date-bar">
							<button class="date-btn" size="mini" @click="selectDate(item,'上午')"
								v-for="(item,i) in swDate" :key="i">{{item}}</button>
						</view>
					</view>
					<view class="after morning">
						<text class="label">上午号源: </text><text>剩余{{xwnum}}</text>
						<view class="date-bar">
							<button class="date-btn" size="mini" @click="selectDate(item,'下午')"
								v-for="(item,i) in xwDate" :key="i">{{item}}</button>
						</view>
					</view>
				</view>

			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import formatDay from "@/utils/format.js"
	import {
		seterkeshiDoctor
	} from '@/utils/axios.js'
	import makeselectRiqi from '@/components/bookingReg/makeselectRiqi/makeselectRiqi.vue'
	import doctorLi from '@/components/bookingReg/doctorLi/doctorLi.vue'
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	export default {
		components: {
			makeselectRiqi,
			doctorLi
		},
		props: [],
		setup(props, context) {

			const title = ref('消化内科')
			const data = reactive({
				doctorList: [],
				barhig: '120rpx',
				systemBarHeight: null,
				swDate: [
					'09:00-09:30',
					'09:30-10:00',
					'10:00-10:30',
					'10:30-11:00',
					'11:00-11:30',
					'11:30-12:00',
				],
				xwDate: [
					'14:00-14:30',
					'14:30-15:00',
					'15:00-15:30',
					'15:30-16:00',
					'16:00-16:30',
					'16:30-17:00',
				],
				yyxqData: {},
				formData: {
					date: null,
					one_id: 1,
					two_id: 1
				},
				swnum: null,
				xwnum: null,
				hzform: {}


			})
			const formdatas = (obj) => {
				seterkeshiDoctor(obj).then(res => {
					data.doctorList = res.data
					console.log(res.data,12314);
					data.doctorList.forEach(item => {
						if (item.am_sy == null) {
							item.am_sy = 0
						}
						if (item.pm_sy == null) {
							item.am_sy = 0
						}

						item.num = item.am + item.pm - item.am_sy - item.pm_sy
						item.am_num = item.am - item.am_sy
						item.pm_num = item.pm - item.pm_sy
					})
					console.log(data.doctorList);
				})
			}
			data.formData.date = formatDay()
			onLoad(option => {
				data.yyxqData.keshi = JSON.parse(option.item)
				title.value = data.yyxqData.keshi.department_two_name
				data.formData.one_id = data.yyxqData.keshi.department_one_id
				data.formData.two_id = data.yyxqData.keshi.department_two_id
				console.log(data.formData);
				formdatas(data.formData)
			})


			// seterkeshiDoctor(data.formData).then(res => {
			// 	console.log(res);
			// })
			// #ifdef MP-WEIXIN
			const getCapsule = () => {
				// 获取胶囊位置并改变顶部自定义导航栏的位置
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();

				//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
				data.barhig = (menuButtonInfo.top + menuButtonInfo.height) * 2 + 'rpx';
			}
			getCapsule()

			const getSysteminfo = () => {
				uni.getSystemInfo({
					success: res => {
						data.systemBarHeight = res.statusBarHeight;

					}
				});
			}
			getSysteminfo()
			// #endif
			const boctoref = (obj) => {
				console.log(obj);
				data.swnum = obj.am_num
				data.xwnum = obj.pm_num

				data.hzform.yisen = obj
				let yonghu = obj
				yonghu.sched_date = formatDay(yonghu.sched_date)
				let odd = new Date(yonghu.sched_date).getDay()

				switch (odd) {
					case 0:
						yonghu.day = '周日';
						break;
					case 1:
						yonghu.day = '周一';
						break;
					case 2:
						yonghu.day = '周二';
						break;
					case 3:
						yonghu.day = '周三';
						break;
					case 4:
						yonghu.day = '周四';
						break;
					case 5:
						yonghu.day = '周五';
						break;
					case 6:
						yonghu.day = '周六';
						break;

				}
				if (yonghu.am_sy == null) {
					yonghu.am_sy = 0
				}
				if (yonghu.pm_sy == null) {
					yonghu.am_sy = 0
				}

				yonghu.num = yonghu.am + yonghu.pm-yonghu.am_sy - yonghu.pm_sy
				yonghu.am_num = yonghu.am - yonghu.am_sy
				yonghu.pm_num = yonghu.pm - yonghu.pm_sy
				data.hzform.yonghu=yonghu
				console.log(data.hzform);
				open()
			}
			const leftback = () => {
				uni.navigateBack({
					delta: 1
				});
			}

			const hqriqi = (val) => {
				data.formData.date = val
				formdatas(data.formData)
				console.log(val);
			}
			const shut = () => {

			}
			const popup = ref(null)

			const open = () => {
				popup.value.open('bottom')
			}
			const close = () => {
				popup.value.close()
			}
			const selectDate = (val, date) => {
				console.log(val, date);
				data.hzform.sjduan = val
				data.hzform.sxwu = date
				uni.navigateTo({
					url: "/pages/home/bookingReg/reservation/reservation?item=" + JSON.stringify(data.hzform)
				})
				close()
			}
			return {
				title,
				...toRefs(data),
				boctoref,
				leftback,
				popup,
				close,
				selectDate,
				hqriqi
			}
		}
	}
</script>

<style lang="scss">
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;

		z-index: 998999;
	}

	.header-title {
		position: fixed;
		top: var(--status-bar-height);

		width: 100%;
		z-index: 998999;
	}

	.content {
		box-sizing: border-box;
		padding: 24rpx 36rpx;

		.doctor-list {
			margin-top: 36rpx;

			.title {
				margin-bottom: 36rpx;
			}
		}

	}

	.openpop {
		.popup {
			border-radius: 20rpx;

			.popup-content {
				padding: 36rpx;
				box-sizing: border-box;
			}

			::v-deep uni-view[name="content"] {
				border-radius: 40rpx 40rpx 0 0;
				overflow: hidden;
			}
		}

		.uptitle {
			text-align: center;
			height: 60rpx;
			position: relative;
			font-size: 34rpx;

			.chacc {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0;

			}
		}

		.morning {
			margin-top: 28rpx;
			margin-bottom: 36rpx;

			text {
				color: #333;
				font-size: 30rpx;
			}

			.label {
				color: #999;
				font-size: 28rpx;
			}

			.date-bar {
				margin-top: 32rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 20rpx;

				.date-btn {
					padding: 8rpx 30rpx;
					color: #0066ff;
				}

				::v-deep .date-btn::after {
					border: none;
				}
			}
		}
	}
</style>
